<!-- 1 脚本 -->
<script lang="ts" setup name="Home">
import NavMenu from '@/components/NavMenu.vue'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import TabContent from '@/components/TabContent.vue'



const router = useRouter()

function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    sessionStorage.removeItem('token')
    router.replace('/login')
  })
}
</script>

<!-- 2 模板 -->
<!-- http://localhost/home -->

<template>
  <el-container class="app">
    <el-aside width="var(--menuWidth)" class="aside">
      <div class="app_title">
        <div class="icon">
          <img src="../assets/logo.png" />
        </div>
        <div class="title">东软云医院管理系统</div>
      </div>
      <!-- 使用菜单 -->
      <NavMenu></NavMenu>
    </el-aside>
    <el-container class="content">
      <el-header class="header">
        <div class="floatleft">
          <div class="breadcrumb">
            <!-- 东软云医院管理系统 -->
            <el-breadcrumb separator="#">
              <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>系统管理</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/system/user' }">用户管理</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>

        <!-- <div class="floatright"> asdasfsdf</div> -->
        <div class="profile floatright">
          <span style="color: #000000; font-size: 16px; margin-right: 10px">admin</span>

          <el-button type="primary" plain round @click="logout">退出</el-button>
        </div>
      </el-header>

      <el-main class="main">
        <TabContent class="tabContent"></TabContent>
      </el-main>
    </el-container>
  </el-container>
</template>

<!-- 3 样式 -->
<style scoped>
.app {
  --menuWidth: 220px;

  height: 100vh;

  .app_title {
    color: white;
    display: flex;
    justify-content: space-evenly;

    margin: 20px 10px;

    .icon {
      width: 30px;

      img {
        width: 30px;
        height: 30px;
      }
    }
  }
}

.header {
  line-height: 60px;
  background: #ffffff;
  font-size: 25px;
  /* color: #FFFFFF; */
  /* border-bottom: solid 0.2px grey; */
  box-shadow: inset 0px -2px 1px rgb(207, 207, 207);

  .breadcrumb {
    display: flex;
    align-items: center;

    height: 60px;
  }
}

.aside {
  background: #304156;
  height: 100%;
}

.main {
  margin: 0;
  padding: 0;

  /* width: 1700px; */
  /* background: #a35555; */
  .tabContent {
    height: 100%;
    /* background-color: #304156; */
    width: calc(100% - 10px);
  }
}
</style>
